<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的v-if与v-show</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

</head>
<body>
    <div id="app">
        <!--
            v-if:如果值为TRUE显示,如果值为FALSE隐藏,v-if是通过删除标签来隐藏标签
            v-show:如果值为ture显示,如果值为FALSE隐藏v-show通过设置display 为none隐藏标签
        -->
        <p v-if="isShow">Hello Vue</p>
        <p v-show="isShow">Hello Vue</p>
        <input type="button" value="切换显示与隐藏" @click="fn1()"/>
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#app",
            data:{
                isShow:true
            },
            methods:{
                fn1(){
                    this.isShow =! this.isShow;
                }
            }
        });
    </script>

</body>
</html>